<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="file" id="d1" name="img" onchange="show()">
<br><hr>

<img  alt="图片位置" width="480px" height="400px" id="img1" onclick="enlarge()">
<br><hr>

</body>
<script>
    function show() {
        let name = document.getElementById('d1').value;
        var img1 = document.getElementById('img1');
        img1.setAttribute('src',name.substr(name.lastIndexOf('\\')+1));
        document.getElementById('d1').setAttribute('type','hidden');
    }

    function enlarge() {
        let img = document.getElementById('img1');
        img.setAttribute('width','1280');
        img.setAttribute('height','600');

        img.setAttribute('value','点击缩小');
        img.setAttribute('onclick','shrink()');
    }

    function shrink() {
        let img = document.getElementById('img1');
        img.setAttribute('width','480');
        img.setAttribute('height','400');

        img.setAttribute('value','点击放大');
        img.setAttribute('onclick','enlarge()');
    }
</script>
</html>